<style>
.a-certificate {
    margin: 0 auto;
}
</style>

{% set jiaoyidata = fsReadJsonSync("./tests/css/aup/data/" ~ dataversion ~ "/jiaoyi.json") %}
<div id="jiaoyi" class="container">
    {% for jiaoyi in jiaoyidata.list %}
        <h3> 演示 {{ loop.index  }} </h3>
        <h4>预览格式</h4>
        <div class="a-certificate u-p-h-12 u-p-v-12">
            <div class="a-certificate__title u-p-b-10">
                <div class="u-list u-list--cross-center u-list--main--justify">
                <div
                            class="u-list-item u-m-r-8 u-fz-14">{{ jiaoyi.name }}</div>
<div
                            class="u-list-item u-fz-12">{{ jiaoyi.create_time }}</div>
                </div>
            </div>

            <div class="u-p-v-10">
                <div class="a-certificate__money-title u-text-center u-p-b-10">{{jiaoyi.content.name}}</div>
                <div class="a-certificate__money u-text-center u-p-b-10 u-fz-18">{{ jiaoyi.content.value }}</div>
            </div>
            {% for s in jiaoyi.states %}
                <div class="a-certificate__record u-state-{{ s.type }} u-text-center u-p-b-10">
                    <div class="u-list u-list--h u-list--table u-list--cross-top">
                        <div class="u-list-item u-m-r-8 a-certificate__record-header">{{ s.name }}</div>
                        <div class="u-list-item u-s-w-10 a-certificate__record-gutter"></div>
                        <div class="u-list-item  a-certificate__record-content">{{ s.content }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="aux-preview-code"><pre class="content"></pre></div>

        <h4>导出格式</h4>
        <table class="app-table-jiaoyi">
            <tbody>
            <tr>
                <td rowspan="5">1.</td>
                <td rowspan="5">
                    <div class="cell">{{ jiaoyi.name }}</div>
                </td>
                <td>
                    <table class="app-table-jiaoyi__sub">
                        <tbody>
                        <tr class="app-table-jiaoyi__normal">
                            <td><div class="cell">日期</div></td>
                            <td><div class="cell">{{ jiaoyi.create_time }}</div></td>
                        </tr>
                        <tr class="app-table-jiaoyi__strong">
                            <td><div class="cell">{{ jiaoyi.content.name }}</div></td>
                            <td><div class="cell">{{ jiaoyi.content.value }}</div></td>
                        </tr>
                        {% for s in jiaoyi.states %}
                            <tr class="app-table-jiaoyi__{{ s.type }}">
                                <td><div class="cell">{{ s.name }}</div></td>
                                <td><div class="cell">{{ s.content }}</div></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="aux-preview-code"><pre class="content"></pre></div>
    {% endfor %}
</div>